<template>
  <div class="city-select">
    <select v-model="selectedProvince" name="province" class="select">
      <option disabled value="">请选择省</option>
      <option v-for="(item, index) in provinces"
              v-if="item.level === 1"
              :value="item">
        {{ item.name }}
      </option>
    </select>

    <select v-model="selectedCity" name="city" class="select">
      <option disabled value="">请选择市</option>
      <option
        v-for="(item, index) in cities"
        :value="item">
        {{ item.name }}
      </option>
    </select>
    <select v-model="selectedBlock" name="block" class="select">
      <option disabled value="">请选择区</option>
      <option
        v-for="(item, index) in blocks"
        :value="item">
        {{ item.name }}
      </option>
    </select>
  </div>
</template>

<script>
  import provinces from '../.././provinces'
    export default {
      name: "SelectCity",
      watch: {
        selectedProvince (newVal, oldVal) {
          // 港澳台数据只有一级,特殊处理
          if (newVal.sheng === '71' || newVal.sheng === '81' || newVal.sheng === '82') {
            this.cities = [newVal]
            this.blocks = [newVal]
          } else {
            this.cities = this.provinces.filter(item => {
              if (item.level === 2 && item.sheng && newVal.sheng === item.sheng) {
                return true
              }
            })
          }
          var _this = this
          // 此时在渲染DOM,渲染结束之后再选中第一个
          this.$nextTick(() => {
            _this.selectedCity = _this.cities[0]
            _this.$emit('input', _this.info)
          })
        },
        selectedBlock () {
          var _this = this
          this.$nextTick(() => {
            _this.$emit('input', _this.info)
          })
        },
        selectedCity (newVal) {
          // 选择了一个市,要选择区了 di是城市的代表,sheng
          if (newVal.sheng === '71' || newVal.sheng === '81' || newVal.sheng === '82') {
            this.blocks = [newVal]
            this.cities = [newVal]
          } else {
            this.blocks = this.provinces.filter(item => {
              if (item.level === 3 && item.sheng && item.sheng === newVal.sheng && item.di === newVal.di && item.name !== '市辖区') {
                return true
              }
            })
          }
          var _this = this
          this.$nextTick(() => {
            _this.selectedBlock = _this.blocks[0]
            // 触发与 v-model相关的 input事件
            _this.$emit('input', _this.info)
          })
        }
      },
      computed: {
        info () {
          return {
            province: this.selectedProvince,
            city: this.selectedCity,
            block: this.selectedBlock
          }
        }
      },
      data () {
        return {
          selectedProvince: '',
          selectedCity: '',
          selectedBlock: '',
          cities: 0,
          provinces,
          blocks: 0
        }
      }
    }
</script>

<style scoped>
  .city-select{
    font-size: 30px;
  }
  .select{
    height: 4.8rem;
    border: 1px solid #ccc;
    border-radius: 1rem;
    padding-left: 1.6rem;
  }
</style>
